<template>
  <div>
    <el-drawer
      v-model="props.addTestShow"
      size="50%"
      :title="'试题' + props.title"
      :before-close="drawerClose"
    >

    <!-- 内容 -->
    <div class="scoll">

      <el-form ref="ruleFormRef" label-width="80px" class="demo-ruleForm" size="small" status-icon>
      
        <!-- 单选按钮 -->
        <el-form-item label-width="0px">
          <el-radio-group v-model="questions.type" class="ml-4">
            <el-radio label="单选题" size="large">单选题</el-radio>
            <el-radio label="多选题" size="large">多选题</el-radio>
            <el-radio label="判断题" size="large">判断题</el-radio>
            <el-radio label="填空题" size="large">填空题</el-radio>
            <el-radio label="问答题" size="large">问答题</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 富文本 -->
        <el-form-item label="题干" prop="valueHtml">
          <div style="border: 1px solid #ccc">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="small" />
            <Editor style="height: 150px; overflow-y: hidden" v-model="questions.title" :defaultConfig="editorConfig"
              mode="small" @onCreated="handleCreated" />
          </div>
        </el-form-item>

        <!-- 选项 -->
        <el-form-item v-if="questions.type=='单选题' || questions.type=='多选题' "> <!--判断是单选还是多选-->

          <div class="" v-for="(item,index) in questions.answers"><br>
            <span>选项 {{ data.letter[index] }}:&nbsp;</span>
            
            <el-input class="el_input" v-model="item.content" />
            
            <span @click="del(index)" class="icon"> <!--点击删除单个input-->
              <el-icon>
                  <CircleClose /><!--icon-->
              </el-icon>
            </span>

          </div>

        </el-form-item>

        <!-- 添加input -->
        <el-form-item v-if="questions.type == '单选题' || questions.type == '多选题'">
            <div style="font-size: 20px; color: #409eff">
              <el-icon @click="add">
                <CirclePlus />
              </el-icon>
            </div>
        </el-form-item>

        <!-- 显示判断 -->
        <!--单选题显示-->
        <el-form-item label="正确答案" prop="yesRadio" v-if="questions.type == '单选题'">
          <div style="position: relative; top: -7px">
            <el-radio-group v-model="questions.answer" class="ml-4">
              <el-radio :label="data.letter[index]" size="large" v-for="(item, index) in questions.answers">
                {{ data.letter[index] }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-form-item>

       <!--多选题显示-->
      <el-form-item label="正确答案" prop="yesRadio" v-if="questions.type == '多选题'">
        <el-checkbox-group v-model="questions.answer">
          <el-checkbox :label="data.letter[index]" v-for="(item, index) in questions.answers" :key="index" />
        </el-checkbox-group>
      </el-form-item>

      <!-- 判断题显示 -->
      <el-form-item label="正确答案" prop="yesRadio" v-if="questions.type == '判断题'">
        <el-radio-group v-model="questions.answer">
          <el-radio-button label="正确" />
          <el-radio-button label="错误" />
        </el-radio-group>
      </el-form-item>

      <!-- 填空题显示 -->
      <el-form-item v-show="data.leng.length > 0" label="正确答案" v-if="questions.type == '填空题'">
        <div class="gap">
          <div v-for="(item, index) in data.leng" style="margin-bottom: 5px">
            <el-input v-model="data.leng[index]" style="width: 100px" />
          </div>
        </div>
      </el-form-item>

      <!-- 问答题显示 -->
      <el-form-item label="解析" v-if="questions.type == '填空题' || questions.type == '问答题'">
        <el-input v-model="questions.explains" type="textarea" style="width: 500px" />
      </el-form-item>

      <!-- 分值 -->
      <el-form-item label="分值" prop="scores">
        <el-input v-model="questions.scores" clearable style="width: 60px" />
      </el-form-item>
      
      <!-- 按钮 -->
      <el-form-item label="" label-widht="0px">
        <el-button type="primary" @click="adds()">保存</el-button>
        <el-button @click="qx">取消</el-button>
      </el-form-item>

      
      </el-form>

    </div>


    
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import {reactive,ref,shallowRef,onBeforeUnmount,onMounted} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; //富文本框
import '@wangeditor/editor/dist/css/style.css'; // 引入富文本 css
import { CircleClose, CirclePlus } from '@element-plus/icons-vue'; // ion

const props = defineProps(['addTestShow', 'updArr', 'title']); //父向子传值
const emit = defineEmits(['drawerClose', 'adds', 'qx']);  //子向父传值
const drawerClose = () => {
  emit('drawerClose', false);
};

// 取消
const qx = () => {
  emit('qx', false);
};
// 确定 <保存按钮>
const adds = () => {  
  if (questions.type == '单选题') {
    emit('adds', false, questions); //数据传给父组件
  }
  if (questions.type == '多选题') {
    emit('adds', false, questions); //数据传给父组件
  }
  if (questions.type == '判断题') {
    emit('adds', false, questions); //数据传给父组件
  }
  if (questions.type == '填空题') {
    emit('adds', false, questions); //数据传给父组件
  }
  if (questions.type == '问答题') {
    emit('adds', false, questions); //数据传给父组件
  }
}

// 数据
let questions:any = reactive({
    id: 0,
    testid: 0,
    title: '',
    type: '单选题',
    scores: '',
    answer: '' || [],
    tags: '',
    explains: '',
    answers: [ //选项数据
      {
        id: 0,
        answerno: 'A',
        questionid: 0,
        content: '',
      },
      {
        id: 0,
        answerno: 'B',
        questionid: 0,
        content: '',
      },
      {
        id: 0,
        answerno: 'C',
        questionid: 0,
        content: '',
      },
      {
        id: 0,
        answerno: 'D',
        questionid: 0,
        content: '',
      },
    ],
})
let data:any = reactive({
  typeRadio: '',
  textInp: '',
  yesRadio: '',
  letter: [ //选项的名
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'G',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z',
  ],
  leng: [],
})

// 富文本编辑器
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容' };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
// 富文本编辑器结束


// 选项删除
let del = (val:any) => {
  // console.log(val);
  questions.answers.splice(val, 1);
}
// 选项添加
const add = () => {
  questions.answers.push({
    id: 0,
    answerno: data.letter[questions.answers.length],
    questionid: 0,
    content: '',
  });
  console.log(questions.answers);
};



// 考试内容的修改
if (props.title == '修改') {
  let list: any = JSON.parse(props.updArr)
  questions = { ...list }
  console.log(questions);
}
onMounted(() => {
  if (props.title == '修改') {
   questions.leng = questions.answer
  }
})


</script>
<style lang="less" scoped>
:deep(.el-drawer__header) {
  margin: 0;
}

.scoll {
  overflow-y: scroll;
  scroll-behavior: smooth;
  overscroll-behavior: contain; //必须加这个，不然会带动整个屏幕滚动，如果整屏幕也有滚动的话
  max-height: 98%;
}

.icon{
  font-size: 20px;
  color: red;
  margin-left: 5px;
}
.radio{
  position: relative;
  top:-7px;
}
.gap{
  display: flex;
  flex-direction: column
}
.el_input{
  width: 400px;height: 35px;
}
</style>
